<template>
  <div
    class="comment list-item"
    :class="{ top: props.comment.top }"
    :data-id="props.comment.roomId"
    draggable="true"
  >
    <div class="avatarWrapper">
      <img :src="props.comment.avatar" />
      <span v-if="props.comment.noMessage > 0" class="count">{{ props.comment.noMessage }}</span>
    </div>
    <div class="infos">
      <div class="nameWrapper">
        <span class="name">{{ props.comment.name }}</span>
        <span class="time">{{ timeDate(lastMessageContentObj()?.time)}}</span>
      </div>
      <div class="record" v-html="computedText"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, onMouted} from 'vue'
import moment from 'moment';
import { getImgTags, getImgPathByTag } from '@/assets/images/emotion/index.ts'
const tags = getImgTags()
const props = defineProps({
  comment: {
    type: Object,
    default: null
  }
})
const computedText = computed(()=> replaceImg(lastMessageContentObj()?.content))
const lastMessageContentObj = () => {
  return Object.keys(props.comment.lastMessage).length > 0 ? JSON.parse(props.comment.lastMessage) : undefined
}
const timeDate = (timeStr: string | undefined) =>{
  if(timeStr === undefined) return
  const now = moment();
  const time = moment(timeStr);

  if (time.isSame(now, 'day')) {
    // 如果是今天，只显示时分
    return time.format('HH:mm');
  } else if (time.isSame(now.clone().subtract(1, 'day'), 'day')) {
    // 如果是昨天，显示 "昨天"
    return '昨天';
  } else if (time.isSame(now, 'week')) {
    // 如果在这周内，显示周几
    return time.format('dddd');
  } else if (time.isSame(now, 'year')) {
    // 如果在今年，显示几月几号
    return time.format('MM-DD');
  } else {
    // 如果不是今年的，显示 YYYY-MM-DD
    return time.format('YYYY-MM-DD');
  }
}
const replaceImg = (text: string) => {
  // 创建一个正则表达式来匹配所有特殊字符
  const regex = new RegExp(tags.join('|'), 'g');
  // 替换文本中的特殊字符为对应的图片
  const replacedText = text ? text.replace(regex, (match) => {
    const imgElement = document.createElement('img');
    imgElement.src = getImgPathByTag(match);
    imgElement.alt = match;
    imgElement.style.width = '15px';
    imgElement.style.height = '15px';
    return imgElement.outerHTML;
  }) : '';

  return replacedText;
}
onMounted(() => {
  console.log('lastMessageContentObj', props.comment.lastMessage)
})
</script>
<style lang="less" scoped>
.comment {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  cursor: pointer;
  &:hover {
    background-color: #dedede;
  }
  &.active {
    background-color: #cfcfcf;
    .time {
      color: #999999 !important;
    }
  }
  &.top {
    background-color: #dedede;
  }
  .avatarWrapper {
    height: 50px;
    width: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 45px;
    img {
      height: 40px;
      width: 40px;
      border-radius: 5px;
    }
    .count {
      background-color: #f73838;
      border-radius: 18px;
      position: absolute;
      right: 0;
      top: 0;
      font-size: 11px;
      color: white;
      padding: 2px 5px;
      line-height: 1.1;
    }
  }

  .infos {
    margin-left: 10px;
    flex: 1;
    overflow: hidden;
    height: 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .nameWrapper {
      width: 100%;
      display: flex;
      justify-content: space-between;
      span:first-child {
        color: #1c1a1d;
        font-size: 14px;
      }
      span:last-child {
        color: #c9c9c7;
        font-size: 13px;
      }
    }
    .record {
      color: #acacac;
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }
  }
}
</style>
